<template>
  <view>
    <u-navbar title="我的维修单" :is-back="false"></u-navbar>

    <view>
      <swipe-direct
          :lr-distance="5"
          left-med="leftMethod"
          right-med="rightMethod"
          @leftMethod="leftMethod"
          @rightMethod="rightMethod">
      <uni-segmented-control styleType="text" :current="current" :values="items" @clickItem="onClickItem"
                             activeColor="#007aff"></uni-segmented-control>
      <view class="content">

        <repair-card :repair-data="repairData"
                     :actions="cardActions"
                     @startRepair="startRepair" @endRepair="endRepair" @contact="contact"
                     @undo="undo"

        ></repair-card>
        <uni-load-more v-if="queryParams.pageSize<repairData.length" color="#007AFF" :status="status" />
      </view>
      </swipe-direct>
    </view>
  </view>
</template>

<script>
import {RepairOrderService} from "../../normalUser/public/repairApplication/repairOrderService";
import RepairCard from "../../components/RepairCard";
import SwipeDirect from "../../components/swiper-direct";
export default {
  components: {SwipeDirect, RepairCard},
  data() {
    return {
      items: ['全部', '进行中', '待评价',"已完成"],
      statusList:[[undefined],[1,2],[3],[4]],
      current: 1,
      cardActions:[
        {
          title:"开始维修",
          icon:"gear",
          method:"startRepair",
          showStandard:"currentState",
          value:[1]
        },
        {
          title:"完成维修",
          icon:"checkmarkempty",
          method:"endRepair",
          showStandard:"currentState",
          value:[2]
        },
        {
          title:"退单",
          icon:"undo-filled",
          method:"undo",
          showStandard:"currentState",
          value:[1,2]
        },
        {
          title:"联系用户",
          icon:"phone",
          method:"contact",
          showStandard:"currentState",
          value:[1,2,3]
        },
      ],
      repairData:[],
      queryParams:{
        currentPage:1,
        pageSize:5,
        filters:{
          repairmanId:uni.getStorageSync('userInfo').eid,
          currentState:[1, 2].join("$|$")
        },
        orderBys:[
          {
            property: "createDatetime",
            order: "desc"
          }
        ]
      },
      totalCount:100,
    }
  },

  created() {
    this.init(0)
    uni.$on("onReachBottom",()=>{
      console.log("repair触底")
      //触底业务逻辑
      if(this.queryParams.pageSize*this.queryParams.currentPage>=this.totalCount){
        this.status="nomore"
        return;
      }
      this.queryParams.currentPage++;
      this.init(1);
    })
  },
  destroyed(){
    uni.$off("onReachBottom")
  },
  methods: {
    init(type){
      //0代表初始化 1代表加载更多
      this.status="loading"
      if(type==0){this.repairData=[];this.queryParams.currentPage=1}
      RepairOrderService.findRepairOrders(this.queryParams).then(res=>{
        //拼接数组
        this.repairData=this.repairData.concat( res.data.datas);
        this.totalCount=res.data.totalCount;
        this.status='more'
      })
    },
    onClickItem(e) {
      if (this.current != e.currentIndex) {
        this.current = e.currentIndex;
        this.queryParams.filters.currentState=this.current!=0?this.statusList[this.current].join("$|$"):null;
        this.init(0)
      }
    },
    clickCard(param){
      let url="/pages/normalUser/public/detailRepairOrder/index?id="+this.repairData[param].eid;
      uni.navigateTo({
        url: url
      })
    },
    startRepair(item){
      RepairOrderService.startRepair(item.eid).then(res=>{
        if(res.data.code==0){
          uni.showToast({
            title: "操作成功",
            icon: 'none'
          })
          this.findRepairOrder();
        }else{
          uni.showToast({
            title: "操作失败",
            icon: 'none'
          })
        }
      }).catch(err=>{
        uni.showToast({
          title: err.message,
          icon: 'none'
        })
      })
    },
    endRepair(item){
      RepairOrderService.endRepair(item.eid).then(res=>{
        if(res.data.code==0){
          uni.showToast({
            title: "操作成功",
            icon: 'none'
          })
          this.findRepairOrder()
        }else{
          uni.showToast({
            title: "操作失败",
            icon: 'none'
          })
        }
      }).catch(err=>{
        uni.showToast({
          title: err.message,
          icon: 'none'
        })
      })
    },
    undo(item){
      console.log("退单")
      uni.showModal({
        title: '退单确认',
        content: '',
        editable:true,
        placeholderText:"请输入退单原因",
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定',res.content);
            RepairOrderService.chargeback(item.eid,res.content).then(res=>{
              if(res.data.code==0){
                uni.showToast({
                  title:"退单成功"
                })
                this.findRepairOrder();
              }
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    leftMethod(){
      if(this.current==this.items.length-1){
        this.current=-1;
      }
      this.onClickItem({"currentIndex":this.current+1})
    },
    contact(item){
      uni.makePhoneCall({
        phoneNumber: item.repairApplicantPhone //仅为示例
      });
    },
    rightMethod(){
      if(this.current==0){
        this.current=this.items.length;
      }
      this.onClickItem({"currentIndex":this.current-1})
    }
  }
}
</script>

<style>
.segmented-control__item {
  background-color: white;
}
</style>
